<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>共享资讯</title>
    <script src="./js/index.js"></script>
    <script src="./js/template.js"></script>
    <script src="./js/axios.min.js"></script>
</head>

<body>
    <header>
        <ul>
            <li data-set="0" class="current">新闻头条</li>
            <li data-set="1">笑话</li>
            <li data-set="2" id="historyLi">历史上的今天</li>
            <li data-set="3">NBA赛事</li>
        </ul>
    </header>
    <main>
        <section id="news" class="current">
            <ul>
            </ul>
        </section>
        <section id="joke"></section>
        <section id="history"></section>
        <section id="nba"></section>
    </main>
    <!-- 新闻模板引擎 -->
    <script type="text/html" id="tpl-news">
        {{each data}}
            <li>
                <img src="{{$value.thumbnail_pic_s}}" alt="">
                <a href="{{$value.url}}">
                    {{$value.title}}
                </a>
                <span>{{$value.date}}</span>
            </li>
        {{/each}}
    </script>
    <!-- 笑话模板引擎 -->
    <script type="text/html" id="liJoke">
        <h2>笑一笑，十年少</h2>
        <ul>{{each data}}
            <li>
                <p>{{$value.content}}</p>
                <span>{{$value.updatetime}}</span>
            </li>
            {{/each}}
        </ul>
    </script>
    <!-- 历史模板引擎 -->
    <script type="text/html" id="tpl_history">
        <ul>
        {{each result}}
        <li>
            <div>
                {{$value.date}}
            </div>
            <div class="hisorytitle">
                <span class="history-today">{{$value.day}}</span>
                <span>{{$value.title}}</span>
            </div>
        </li>
        {{/each}}
        </ul>
    </script>
    <!-- NBA模板引擎 -->
    <script type="text/html" id="nbatext">
        <table>
            <caption>{{title}}{{duration}}</caption>
        <!-- 开始循环 -->
        {{each matchs}}
        <thead>
            <tr>
                <th colspan="4">{{$value.date}}{{$value.week}}</th>
            </tr>
            <tr>
                <th>时间</th>
                <th>对阵双方</th>
                <th>比分</th>
                <th>赛程</th>
            </tr>
        </thead>
        <!-- 开始具体赛程循环 -->
        {{each $value.list}}
        <tbody>
            <tr>
                <td>{{$value.time_start}}</td>
                <td>{{$value.team1}}@{{$value.team2}}</td>
                <td>{{$value.team1_score}}:{{$value.team2_score}}</td>
                <td>{{$value.status_text}}</td>
            </tr>
        </tbody>
        <!-- 结束具体赛程循环 -->
        {{/each}}
        <!-- 结束大循环 -->
        {{/each}}
        </table>    
    </script>
</body>

</html>